<template>
	<view class="zxshop-login">
		<view style="display: none;" class="back-btn yticon icon-zuojiantou-up" @click="navBack"></view>
		<view class="content">
			<!-- 头部logo -->
			<view class="header">
				<text class="icon logo">&#xe64b;</text>
			</view>
			<!-- 主体 -->
			<view class="main">
				<zxInput v-model="username" type="text" maxlength="11" placeholder="手机号"></zxInput>
				<zxInput v-model="verCode" type="number" maxlength="6" placeholder="验证码" isShowCode ref="zxInput" @setCode="getVerCode()"></zxInput>
			</view>
			<view class="event">
				<zxButton class="btn" text="登 录" :rotate="isRotate" @click.native="startLogin()"></zxButton>
			</view>

			<view class="oauth-row" v-bind:style="{top: positionTop + 'px'}">
				<view class="oauth-image" v-for="provider in providerList" :key="provider.value">
					<!-- #ifdef MP-WEIXIN -->
					<button class="icon-btn" @click="oauth(provider.value)" open-type="getUserInfo" @getuserinfo="getUserInfo"><text
						 class="icon wechat">&#xe665;</text></button>
					<!-- #endif -->
				</view>
			</view>

		</view>
	</view>
</template>

<script>
	import myCloud from '@/common/util/cloud.js';
	import myConst from '@/common/util/const.js';
	import zxInput from '@/components/zx-ui/zx-login/zx-input.vue'
	import zxButton from '@/components/zx-ui/zx-login/zx-button.vue'
	import {
		mapMutations
	} from 'vuex';
	import { sendSmsCode,wxLogin,getUserInfo,loginBySms } from '@/common/api/user.js'
	export default {
		components: {
			zxInput,
			zxButton
		},
		data() {
			return {
				username: '', // 用户/电话
				verCode: "", //验证码
				isRotate: false, //是否加载旋转
				providerList: [],
				positionTop: 0
			}
		},
		onReady() {
			this.initPosition();
			this.initProvider();
		},
		methods: {
			...mapMutations(['login', 'setUserInfo']),
			navBack() {
				uni.navigateBack();
			},
			getVerCode() {
				var that = this
				//获取验证码
				if (!/^1\d{10}$/.test(this.username)) {
					uni.showToast({
						icon: 'none',
						title: '手机号格式不正确'
					});
					return
				}
				that.$refs.zxInput.$emit('runCode'); //触发倒计时（一般用于请求成功验证码后调用）
				const randomStr = '00000' + Math.floor(Math.random() * 1000000)
				const req = {
					mobile: this.username,
					code: randomStr.substring(randomStr.length - 6),
					type: 'login'
				}
				sendSmsCode(req).then(res=>{
					setTimeout(function() {
						that.$refs.zxInput.$emit('runCode', 0); //模拟下需要 终止倒计时
					}, 60000)
				})
				
			},
			initProvider() {
				const filters = ['weixin'];
				uni.getProvider({
					service: 'oauth',
					success: (res) => {
						if (res.provider && res.provider.length) {
							for (let i = 0; i < res.provider.length; i++) {
								if (~filters.indexOf(res.provider[i])) {
									this.providerList.push({
										value: res.provider[i]
									});
								}
							}
						}
					},
					fail: (err) => {
						console.error('获取服务供应商失败：' + JSON.stringify(err));
					}
				});
			},
			initPosition() {
				/**
				 * 使用 absolute 定位，并且设置 bottom 值进行定位。软键盘弹出时，底部会因为窗口变化而被顶上来。
				 * 反向使用 top 进行定位，可以避免此问题。
				 */
				this.positionTop = uni.getSystemInfoSync().windowHeight - 120;
			},
			oauth(v) {
				var that = this;
				uni.login({
					provider: v,
					success: function(loginRes) {
						const data = {
							code: loginRes.code
						}
						wxLogin(data).then(res=>{
							that.$api.msg(res.msg);
							if (res.code == 0) {
								const data2 = {
									uid: res.uid,
									field: ['mobile']
								}
								getUserInfo(data2).then(res2=>{
									if (res2.code == 0) {
										if (res2.userInfo.mobile == undefined) {
											res.mobile = ''
										} else {
											res.mobile = res2.userInfo.mobile
										}
										that.login(res)
										setTimeout(() => {
											uni.reLaunch({
												url:'/pages/index/index'
											})
										}, 1000)
									}
								})
							}
						})
						
					}
				});
			},
			async startLogin() {
				//登录
				if (this.isRotate) {
					//判断是否加载中，避免重复点击请求
					return false;
				}
				if (!/^1\d{10}$/.test(this.username)) {
					uni.showToast({
						icon: 'none',
						title: '手机号格式不正确'
					});
					return false;
				}
				if (this.verCode.length != 6) {
					uni.showToast({
						icon: 'none',
						position: 'bottom',
						title: '验证码不正确'
					});
					return false;
				}
				this.isRotate = true
				const data = {
					mobile: this.username,
					code: this.verCode
				}
				const res = await loginBySms(data)
				this.isRotate = false
				this.$api.msg(res.msg);
				if (res.code == 0) {
					uni.getProvider({
						service: 'oauth',
						success: (res2) => {
							if (res2.provider && res2.provider.length) {
								if(res2.provider[0]=='weixin'){
									this.oauth('weixin')
								}
							}else{
								this.login(res)
								setTimeout(() => {
									// uni.navigateBack();
									uni.reLaunch({
										url:'/pages/index/index'
									})
								}, 1000)
							}
						},
						fail: (err) => {
							console.error('获取服务供应商失败：' + JSON.stringify(err));
						}
					});
				}
			},
			getUserInfo({
				detail
			}) {
				if (detail.userInfo) {
					uni.setStorageSync('userInfo', detail.userInfo)
					this.setUserInfo(detail.userInfo)
				}
			}
		}
	}
</script>

<style lang="scss">
	.zxshop-login {

		.back-btn {
			position: absolute;
			left: 40rpx;
			z-index: 9999;
			padding-top: var(--status-bar-height);
			top: 40rpx;
			font-size: 40rpx;
			color: $font-color-base;
		}

		.content {
			display: flex;
			flex-direction: column;
			justify-content: center;

			.header {
				margin-top: 100rpx;
				text-align: center;

				.logo {
					font-size: 200rpx;
					font-family: iconfont;
					color: $zx-color-primary;
				}
			}

			.main {
				display: flex;
				flex-direction: column;
				padding-left: 70rpx;
				padding-right: 70rpx;
			}

			.event {
				margin-top: 50rpx;
			}

			.other_login {
				display: flex;
				flex-direction: row;
				justify-content: center;
				align-items: center;
				text-align: center;
				margin-top: 100rpx;

				button {
					line-height: 1.2;
					background-color: #fff;
				}

				button::after {
					border: none;
				}

				.wechat {
					color: #83DC42;
					font-size: 100rpx;
				}
			}

			.footer {
				display: flex;
				flex-direction: row;
				justify-content: center;
				align-items: center;
				font-size: 28rpx;
				margin-top: 30rpx;
				color: rgba(0, 0, 0, 0.7);
				height: 40rpx;
				line-height: 40rpx;

				text {
					font-size: 24rpx;
					margin-left: 15rpx;
					margin-right: 15rpx;
				}
			}

			.oauth-row {
				display: flex;
				flex-direction: column;
				justify-content: center;
				position: absolute;
				top: 0;
				left: 0;
				width: 100%;

				.icon-btn {
					width: 80rpx;
					height: 80rpx;
					background-color: #F8F8F8;
				}

				button::after {
					border: none;
				}

				.wechat {
					color: #83DC42;
					font-size: 80rpx;
					position: absolute;
					top: -60rpx;
					left: 0;
					height: 80rpx;
				}
			}
		}
	}
</style>
